<template>
  <div class="tour">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="日常开课" name="first">
        <div class="tours">
          <div class="tour_items" v-for="(item,index) in openingList" :key="index">
            <img
              :src=item.image
              @click="tour_detail(item)"
            />
            <br />
            <div class="dash">
              <p>{{item.title}}</p>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-drawer
      :title="title"
      v-if="drawer"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="50%"
    >
      <div v-html="body" style="height:1000px;width:100%;overflow:auto;padding:20px 150px"></div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      activeName: "first",
      openingList: [
        {
          image: require('../assets/images/tour1.jpg'),
          title: "软开带你遨游C语言的海洋！",
          content: "软开海洋"
        },
        {
          image: require('../assets/images/tour2.jpg'),
          title: "社团线下交流周，软开会长林如言分享会",
          content: "社团交流"
        },
        {
          image: require('../assets/images/tour3.jpg'),
          title: "科技节赛前培训第一期",
          content: "科技节第一期"
        },
        {
          image: require('../assets/images/tour4.jpg'),
          title: "科技节赛前培训第二期",
          content: "科技节第二期"
        },
        {
          image: require('../assets/images/tour5.jpg'),
          title: "科技节赛前培训第三期",
          content: "科技节第三期"
        },
        {
          image: require('../assets/images/tour6.jpg'),
          title: "软开招新！欢迎你们的到来",
          content: "软开招新啦"
        },
        {
          image: require('../assets/images/tour7.jpg'),
          title: "圣诞快乐，软开祝你圣诞快乐~",
          content: "圣诞快咯"
        },
        {
          image: require('../assets/images/tour8.jpg'),
          title: "软开招干事啦！新鲜好玩的科技就在软开",
          content: "软开招干事啦啦啦"
        }
      ]
    };
  },
  created(){
    this.fetchEvent()
  },
  methods: {
    jump(url) {
      window.locati.on.href = url;
    },
    tour_detail(item) {
      this.drawer = true;
      this.title = item.title;
      this.body = item.content;
    },
    handleClose(done) {
      done();
    },
    handleClick(){
      
    },
    async fetchEvent(){
      const res =await this.$http.get('/events')
      this.openingList=res.data.infos.list
      this.openingList.forEach((list)=>{
        list.image = 'http://121.199.23.187:8080/static/images/event/'+list.pic
      })
      this.openingList = this.openingList.filter(item => item.type === 1)
    }
  }
};
</script>

<style scoped lang="scss">
.tour {
  width: 1200px;
  margin-left: 20%;
  padding-top: 20px;
}
.tours {
  width: 1200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .tour_items {
    width: 25%;
    display: flex;
    flex-direction: column;
    img {
      width: 288px;
      height: 180px;
    }

    .dash {
      border: 1px solid #dedede;
      width: 95.5%;
      margin-top: -17px;
      margin-bottom: 20px;
      p {
        font-size: 14px;
        padding: 10px 5px;
      }
      span {
        font-size: 20px;
        padding: 0px 15px;
        color: #ff842a;
      }
    }
  }
}
</style>